<template>
	<view>

		<view class="list">
			<view class="lists" v-for="(val,index) in arr" :key='index'>
				<view>
					<view class="head">
						<view class="listleft">
							<image src="../../static/my/@1x图片.png" mode=""></image>
						</view>
						<view class="listmiddle">
							<view><text>{{val.receiver}}</text><text>{{val.mobile}}</text></view>
							<view v-show="checked != val.addrId" style="height: 50rpx;"></view>
							<view v-show="checked == val.addrId" style="height: 50rpx;">默认</view>
							<view class="listmiddlelast" style="height: 50rpx;"><view>{{val.province}}</view><view>{{val.city}}</view><view>{{val.area}}</view><view></view></view>
							<view class="listmiddlelast" style="height: 50rpx;"><view>{{val.addr}}</view></view>
						</view>
						<view class="listright" @click="radact(val)">
							<image src="../../static/my/@1xmd-border_color.png" mode=""></image>
						</view>
					</view>
					<view class="footer">
						<label class="radio" @click="radio(val,index,val.addrId)">
							<radio value="" :checked='checked == val.addrId' /><text>默认地址</text>
						</label>
						<view @click="btn(val.addrId)">删除</view>
					</view>
				</view>
			</view>

		</view>
		<view class="site">
			<u-button type="warning" @click="add">新建地址</u-button>
		</view>
	</view>
</template>

<script>
	import myshop from '../../components/myshop/myshop.vue'
	export default {
		components: {
			myshop
		},
		data() {
			return {
				arr: [],
					checked:''
			};
		},
		created() {
			this.going()
			
		},
		methods: {
			//删除地址
			btn(e){
				console.log(e)
				this.$u.delete('/p/address/deleteAddr/'+e).then(res =>{
					if(res.statusCode == 400){
						uni.showToast({
							title: '默认地址无法删除',
							duration: 2000,
							icon:'none'
						});
					}else{
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.going()
					}
					
				}).catch((e) =>{})
			},
			//选择默认地址
			radio(val,index,e) {
				console.log(val.addrId,e)
				this.$u.put('/p/address/defaultAddr/'+val.addrId).then(res =>{
					if(res.statusCode == 200){
						this.checked = e
						uni.showToast({
							title: '设置默认地址成功',
							duration: 2000
						});
						this.going()
					}
				}).catch((e) =>{})
			},
			add() {
				uni.navigateTo({
					url: '/my/site/addsite',
				});
			},
			radact(val) {
				console.log(val)
				const value = JSON.stringify(val)
				console.log(value)
				uni.navigateTo({
					url: '/my/site/redactsite?value='+value,
				});
			},
			//获取收货地址列表
			going() {
				this.$u.get('/p/address/list').then(res => {
					console.log(res)
					this.arr = res.data
					this.checked = res.data[0].addrId
					// for (let i = 0; i < res.data.length; i++) {
					// 	console.log(res.data[i].receiver)
					// 	this.arr[i].name = res.data[i].receiver
					// 	this.arr[i].iPhone = res.data[i].mobile
					// 	this.arr[i].name = res.data[i].receiver
					// 	this.arr[i].id = res.data[i].addrId
					// }
					// console.log(this.arr[].name)
				}).catch((e) => {});
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.lists {
		width: 90%;
		height: 294rpx;
		background-color: #FFFFFF;
		margin: 0 auto;
		border-radius: 30rpx;
	}

	.lists>view {
		margin-top: 20rpx;
	}

	.lists>view>view {
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
		width: 90%;
	}

	.head {
		height: 220rpx;
		border-bottom: 1rpx solid #606266;
	}

	.footer {
		height: 20rpx;
		padding-top: 20rpx;
	}

	.listleft {
		margin-top: 60rpx;
		height: 100rpx;
		line-height: 50rpx;
	}

	.listmiddle {
		display: flex;
		flex-direction: column;
		padding-top: 40rpx;
	}

	.listmiddle>view:nth-child(1)>text:nth-child(1) {
		font-size: 44rpx;
		margin-right: 10rpx;
	}

	.listmiddle>view:nth-child(3) {
		color: #FB9C00;
		font-size: 30rpx;
	}

	.listmiddle>view:nth-child(4) {
		font-size: 30rpx;
		width: 380rpx;
		height: 80rpx;
	}



	.listright {
		margin-top: 60rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.lists image {
		width: 100rpx;
		height: 100rpx;
	}

	.site {
		width: 90%;
		margin: 0 auto;
		margin-top: 40rpx;
	}
	.listmiddlelast{
		display: flex;
		
	}
	.listmiddlelast>view{
		margin-left: 10rpx;
	}
</style>
